<template>
<!-- 下面是每一条新闻详细内容 -->
    <div class="newsInfo-container">
        <!-- 下面所有都不用遍历是因为每条新闻的所有内容都是一个对象 -->
        <!-- 大标题 -->
        <h3 class="title">{{newsInfo.title}}</h3>
        <!-- 子标题 -->
        <p class="subtitle">
            <span>{{newsInfo.add_time | dataFormat}}</span>
            <span>点击次数：{{newsInfo.click}}</span>
        </p>
        <hr>
        <!-- 内容 -->
        <!-- 带有标签的内容要用v-html来渲染 -->
        <div class="content" v-html="newsInfo.content"></div>
        <!-- 评论区 -->
        <!-- 把父组件中的data传到子组件中去 -->
        <my-com :id="this.id"></my-com>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import comment from './comment/subcomment.vue'
export default {
    data(){
        return {
        //将newlist中url地址中传过来的参数获取并且挂在data上方便以后调用，通过url传过来的参数，可以通过this.$route.params.XX获取
            id:this.$route.params.id,
            newsInfo:{}//这里是对象就是因为每条新闻对应的每个id所有的内容组成就是一个对象
        }
    },
    created(){
        this.getNewsInfo()
    },
    methods:{
        getNewsInfo(){
        this.$http.get('http://www.liulongbin.top:3005/api/getnew/'+this.id).then(result=>{
            if(result.body.status===0){
                this.newsInfo=result.body.message[0]//因为每条新闻只对应一个id所以数组里面只有一个对象
            }else{
                 Toast('获取newlist失败');
            }
        })
        }
    },
    components:{
        'my-com':comment
    }
}
</script>
<style  lang="scss" >
.newsInfo-container{
    padding: 0 4px;
    .title{
     font-size: 16px;
     text-align: center;
     margin: 15px 0px;
    }
    .subtitle{
     display: flex;
     justify-content: space-between;
     color: blue;
    }
    .content{
    img{//如果内容里面的图片看不完整，那么要设置它的宽为100%，此时要把scoped去掉才会生效,由于没有图片所以不用写
        width: 100%;
    }
    }
}
</style>